$wi: 600px;
$hei: 340px;
.content {
  #banner {
    a {
      text-decoration: none;
    }
    margin-left: 400px;
    width: $wi;
    height: $hei;
    position: relative;
    overflow: hidden;

    #list {
      width: $wi*6;
      height: $hei;
      z-index: 1;
      position: absolute;
      //没有定位这句会出错
      a {
        width: $wi;
        height: $hei;
        float: left;
        position: relative;
        img{
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        span{
          display: block;
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-indent: 20px;
          color:#fff;
          background: rgba(#333,.5);
          position: absolute;
          left: 0;
          bottom: 0;
          z-index: 4;
        }
      }

    }
    #buttons {
      z-index: 9;
      position: absolute;
      bottom: 10px;
      right: 20px;
      span {
        display: block;
        float: left;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
        margin-left: 4px;
        border: 1px solid #38f8d7;
        &.on {
          background: #38f8d7;
          border: 1px solid red;
        }
      }
    }
    #prev, #next {
      display: none;
      width: 30px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: white;
      background: red;
      position: absolute;
      top: 150px;
      z-index: 4;
      &:hover {
        background: #666;
      }
    }
    #prev {
      left: 20px;
    }
    #next {
      right: 20px;
    }
    &:hover{
      #prev,#next{
        display: block;
      }
    }
  }
}